<template>
  <div class="page">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="个人信息" name="PersonalInformation">
        <PersonalInformation></PersonalInformation
      ></el-tab-pane>
      <el-tab-pane label="实名认证" name="second"
        ><RealNameAuthentication></RealNameAuthentication
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import type { TabsPaneContext } from 'element-plus';
import PersonalInformation from './component/PersonalInformation.vue';
import RealNameAuthentication from './component/RealNameAuthentication.vue';
const activeName = 'PersonalInformation';

function handleClick(tab: TabsPaneContext, event: Event) {
  console.log(tab, event);
}
</script>

<style lang="scss" scoped>
.page {
  padding: 20px;
}
.body {
  display: flex;
  justify-content: space-between;
}
ul {
  margin: 0px;
  padding: 0px;
}
h4 {
  width: 80px;
}
.li {
  display: flex;
  align-items: center;
}
.span1 {
  width: 250px;
  margin-left: 20px;
}
.span2 {
  color: #0095ff;
  display: flex;
  align-items: center;
}
.right {
  padding-right: 100px;
}
</style>
